<!--test.vue-->
<template>
  <div
    class="box"
    style="width: 100%; height: 100%; position: relative"
    ref="echartsBox"
  >
    <v-chart ref="echarts" :option="option" :key="key" />
    <x-label v-if="objData" class="label-class" :obj="objData"></x-label>

    <!-- <div class="time-bottom">2019/01/01 - 2020/01/01</div> -->
  </div>
</template>

<script>
import { config } from "./data.js";
import label from "./label.vue";
import { deepClone } from "../../../../../common/uitls";
export default {
  name: "CirclePieChart",
  components: {
    XLabel: label
  },
  props: {
    circlePieChartForm: {
      type: Object,
      default: () => {
        return config;
      }
    }
  },
  watch: {
    circlePieChartForm: {
      handler(val) {
        console.log("pieOptions", val);
        this.option = val;
        this.percentageInit()
        clearInterval(this.timer)
        this.anmateAuto(this.option)
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      option: {},
      key: 1,
      objData: null,
      oldData:null,
      allNum:0,
      percentageList:[],
      numShowType:'nt',
      nowIndex:0
    };
  },
  mounted() {
    let MutationObserver =
      window.MutationObserver ||
      window.WebKitMutationObserver ||
      window.MozMutationObserver;
    let element = this.$refs["echartsBox"];
    this.observer = new MutationObserver(mutationList => {
      for (let mutation of mutationList) {
        console.log(mutation);
      }
      console.log("自适应");
      // this.$refs['echarts'].resize()
      this.key += 1;
    });
    this.observer.observe(element, {
      attributes: true,
      attributeFilter: ["style"],
      attributeOldValue: true
    });
    this.percentageInit()
    this.anmateAuto(this.option)
    this.modifyConfig()

  },
  methods: {
    percentageInit(){
      this.allNum = 0
      this.percentageList = []
      this.option.series[0].data.forEach(element => {
        this.allNum = this.allNum + element.value
      });
      this.option.series[0].data.forEach(element => {
        this.percentageList.push( parseFloat((element.value/this.allNum * 100).toFixed(2))     ) 
      });
    },
    modifyConfig(){
      // let valueArr=this.option.series[0].data
      this.oldData=deepClone(this.option.series[0].data)
      this.$bus.$on("updateContent", data => {
        if(data.content==="{nt}"){
          this.numShowType = 'nt'
            // this.option.series[0].data=this.oldData
            this.objData = this.option.series[0].data[this.nowIndex]
        }else{
          this.numShowType = 'notnt'
          this.objData = {
            value: this.percentageList[this.nowIndex],
            name: this.option.series[0].data[this.nowIndex].name,
          }
            // let total= valueArr.reduce((acc,cur)=>{
            //   return acc + cur.value
            // },0)
            // valueArr.map(item=>{
            //   item.value=item.value/total*100
            // })
        }
    });
    },
    anmateAuto(option) {
      // 自动轮播
      let index = 0; //轮播标识
      let dynamisTime = 3000; //间隔时间
      let len = option.series[0].data.length; //轮播长度
      let chart_pie = this.$refs["echarts"];
      chart_pie.clear()
      
      if ( this.numShowType == 'nt') {
        this.objData = option.series[0].data[0];
      }else{
        this.objData = {
          value: this.percentageList[0],
          name: option.series[0].data[0].name,
        }
      }
      

      chart_pie.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0
      });
      
      this.timer = setInterval(() => {
        chart_pie.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index
        });
        index++;
        if (index >= len) {
          index = 0;
        }
        // this.objData = option.series[0].data[index];
        if ( this.numShowType == 'nt') {
          this.objData = option.series[0].data[index];
        }else{
          this.objData = {
            value: this.percentageList[index],
            name: option.series[0].data[index].name,
          }
        }
        chart_pie.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: index
        });
        this.option = { ...option };
      }, dynamisTime);
    }
  },
  beforeDestroyed() {
    if (this.observer) {
      this.observer.disconnect();
      this.observer.takeRecords();
      this.observer = null;
    }
    this.timer && clearInterval(this.timer);
  }
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #24262d;
}
.label-class {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.top-right-top {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 12px;
  color: #979797;
}
.time-bottom {
  position: absolute;
  width: 100%;
  bottom: 20px;
  text-align: center;
  font-size: 12px;
  color: #979797;
}
</style>
